<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view style="padding-bottom:120upx;">
            <view @tap="goToGoodsDetails" class="goods flex-row">
                <view class="goods-pic flex-grow-0">
                    <image :src="data.goods.cover_pic"></image>
                </view>
                <view class="goods-info flex-grow-1 flex-col">
                    <view class="goods-name flex-grow-1">
                        {{data.goods.name}}
                    </view>
                    <view class="flex-grow-1 goods-name" v-for="(item,index) in data.attr" :key="item.id">
                        <view class="text-more-2" style="margin:5upx 0;-webkit-line-clamp: 1;">
                            <text>{{item['attr_group_name']}} :  </text>
                            <text style="color:#ff6845">{{item['attr_name']}}</text>
                        </view>
                    </view>
                    <view class="money flex-grow-0 flex-row flex-y-bottom ">
                        <view class="original_price flex-gorw-0">
                            ¥ {{data.goods.original_price}}
                        </view>
                        <view class="price flex-grow-0">
                            ¥ {{data.goods.pay_price}}
                        </view>
                    </view>
                </view>
                <view class="goods-right flex-grow-0 flex-y-center">
                    <image :src="data.__wxapp_img.share.right.url"></image>
                </view>
            </view>
            <view class="shop">
                <view class="shop-title flex-y-center">
                    门店信息
                </view>
                <view class="shop-info">
                    <view class="shop-name">
                        {{data.goods.shopList[0].name}}
                    </view>
                    <view class="shop-addres">
                        地址：{{data.goods.shopList[0].address}}
                    </view>
                    <view class="shop-time">
                        营业时间：{{data.goods.shopList[0].shop_time?data.goods.shopList[0].shop_time:'7 x 24'}}
                    </view>
                </view>
                <view @tap="goToShopList" class="all-shop flex-row flex-y-center">
                    <view class="shop-text flex-grow-1 flex-y-center">
                        查看全部{{data.goods.shopListNum}}家分店
                    </view>
                    <view class="shop-more flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
            </view>
            <view class="order">
                <view class="order-title flex-y-center">
                    订单信息
                </view>
                <view class="order-info">
                    <view class="order-info-item">
                        订单号：{{data.goods.order_no}}
                    </view>
                    <view class="order-info-item">
                        下单时间：{{data.goods.addtime}}
                    </view>
                    <view class="order-info-item" v-for="(item,index) in data.goods.orderForm" :key="item.id">
                        <view class="flex-row w-100 h-100" style="height:100upx;" v-if="item.type=='uploadImg'">
                            <view class="flex-grow-0 flex-y-center">{{item.key}}：</view>
                            <view class="flex-grow-1 flex-y-center">
                                <image mode="aspectFit" :src="item.value" style="width:88upx;height:88upx;"></image>
                            </view>
                        </view>
                        <block v-else>
                            {{item.key}}：{{item.value}}
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <view class="btn-group flex-row" v-if="data.goods.apply_delete!=1&&data.goods.is_refund!=1&&data.goods.is_comment!=1">
            <block v-if="data.goods.is_pay==1&&data.goods.is_use==0&&data.goods.apply_delete==0">
                <view class="btn-group-item apply flex-x-center flex-y-cneter" v-if="data.goods.pay_price>0">
                    申请退款
                </view>
                <view @tap="orderQrcode" class="btn-group-item promptly flex-x-center flex-y-cneter">
                    立即使用
                </view>
            </block>
            <block v-if="data.goods.is_pay==0&&data.goods.is_cancel==0">
                <view @tap="orderCancel" class="btn-group-item apply flex-x-center flex-y-cneter" :data-id="data.goods.id">
                    取消
                </view>
                <view @tap="GoToPay" class="btn-group-item promptly flex-x-center flex-y-cneter" :data-id="data.goods.id">
                    支付
                </view>
            </block>
            <block v-if="data.goods.is_use==1&&data.goods.is_comment==0&&data.__is_comment">
                <view @tap="comment" class="btn-group-item apply flex-x-center flex-y-cneter" :data-id="data.goods.id" v-if="data.__is_comment">
                    评价
                </view>
            </block>
        </view>
        <view @tap="hide" :class="['flex-row flex-y-center modal', data.hide==1?'hide':'']">
            <view class="flex-y-center" style="width:100%;height:800upx;padding:100upx;">
                <view style="background-color:#fff;width:100%;height:100%;border-radius:10upx;padding:0 50upx;">
                    <view class="flex-x-center" style="width:100%;height:50upx;margin-top:50upx;font-size:13pt;margin-bottom:20upx">提货二维码</view>
                    <image :src="data.qrcode" style="width:450upx;height:450upx;"></image>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        hide: 1,
        qrcode: ""
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e), this.getOrderDetails(e);
    },
    onReady: function(e) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(e) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(e) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(e) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(e) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(e) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			getOrderDetails: function(e) {
        var t = e.oid, o = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.order_details,
            method: "get",
            data: {
                id: t
            },
            success: function(e) {
                0 == e.code ? o.setData({
                    attr: JSON.parse(e.data.attr),
                    goods: e.data
                }) : o.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && o.getApp.core.redirectTo({
                            url: "/pages/book/order/order?status=1"
                        });
                    }
                });
            },
            complete: function(e) {
                setTimeout(function() {
                    o.getApp.core.hideLoading();
                }, 1e3);
            }
        });
    },
    goToGoodsDetails: function(e) {
        myVue.getApp.core.redirectTo({
            url: "/pages/book/details/details?id=" + this.data.goods.goods_id
        });
    },
    orderCancel: function(e) {
			var _this = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var t = e.currentTarget.dataset.id;
        myVue.getApp.request({
            url: myVue.getApp.api.book.order_cancel,
            data: {
                id: t
            },
            success: function(e) {
                0 == e.code && myVue.getApp.core.redirectTo({
                    url: "/pages/book/order/order?status=0"
                });
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            }
        });
    },
    GoToPay: function(e) {
			var _this = this;
        myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.order_pay,
            data: {
                id: e.currentTarget.dataset.id
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            },
            success: function(e) {
                0 == e.code && myVue.getApp.core.requestPayment({
                    _res: e,
                    timeStamp: e.data.timeStamp,
                    nonceStr: e.data.nonceStr,
                    package: e.data.package,
                    signType: e.data.signType,
                    paySign: e.data.paySign,
                    success: function(e) {},
                    fail: function(e) {},
                    complete: function(e) {
                        "requestPayment:fail" != e.errMsg && "requestPayment:fail cancel" != e.errMsg ? myVue.getApp.core.redirectTo({
                            url: "/pages/book/order/order?status=1"
                        }) : myVue.getApp.core.showModal({
                            title: "提示",
                            content: "订单尚未支付",
                            showCancel: !1,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && myVue.getApp.core.redirectTo({
                                    url: "/pages/book/order/order?status=0"
                                });
                            }
                        });
                    }
                }), 1 == e.code && myVue.getApp.core.showToast({
                    title: e.msg,
                    image: "/static/images/icon-warning.png"
                });
            }
        });
    },
    goToShopList: function(e) {
        myVue.getApp.core.redirectTo({
            url: "/pages/book/shop/shop?ids=" + this.data.goods.shop_id
        });
    },
    orderQrcode: function(e) {
        var t = this;
        e.target.dataset.index;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), t.data.goods.offline_qrcode ? (t.setData({
            hide: 0,
            qrcode: t.data.goods.offline_qrcode
        }), myVue.getApp.core.hideLoading()) : myVue.getApp.request({
            url: myVue.getApp.api.book.get_qrcode,
            data: {
                order_no: t.data.goods.order_no
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    hide: 0,
                    qrcode: e.data.url
                }) : t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
    hide: function(e) {
        this.setData({
            hide: 1
        });
    },
    comment: function(e) {
        myVue.getApp.core.navigateTo({
            url: "/pages/book/order-comment/order-comment?id=" + e.target.dataset.id,
            success: function(e) {},
            fail: function(e) {},
            complete: function(e) {}
        });
    }
		},
	}
</script>

<style scoped>
.goods {
    padding: 24upx;
    background-color: #fff;
}

.goods-pic {
    margin-right: 24upx;
}

.goods-pic image {
    width: 208upx;
    height: 208upx;
}

.goods-right image {
    width: 16upx;
    height: 26upx;
}

.goods-info {
    margin-top: 10upx;
    margin-bottom: 32upx;
    margin-right: 56upx;
}

.goods-name {
    font-size: 11pt;
    color: #353535;
}

.money {
    margin-top: 20upx;
    justify-content: flex-end;
}

.original_price {
    text-decoration: line-through;
    color: #a4a4a4;
    font-size: 10pt;
}

.price {
    color: #ff4544;
    font-size: 12.5pt;
    margin-left: 24upx;
}

.shop-more image {
    width: 16upx;
    height: 26upx;
}

.shop {
    background-color: #ffffff;
    margin-bottom: 20upx;
    padding: 0 24upx;
    font-size: 11pt;
    margin-top: 20upx;
}

.shop-title {
    height: 72upx;
    font-size: 10pt;
    color: #a4a4a4;
    border-bottom: 1upx solid #e2e2e2;
}

.shop-info {
    border-bottom: 1upx solid #e2e2e2;
    padding: 30upx 0;
}

.shop-name {
    margin-bottom: 20upx;
    color: #353535;
}

.shop-addres,.shop-time {
    color: #999999;
}

.all-shop {
    color: #00a0e9;
    height: 80upx;
}

.order {
    background-color: #fff;
    padding: 0 24upx;
}

.order-title {
    font-size: 10pt;
    color: #a4a4a4;
    height: 72upx;
    border-bottom: 1upx solid #e2e2e2;
    margin-bottom: 30upx;
}

.order-info {
    font-size: 11pt;
    color: #353535;
    line-height: 1.5;
}

.order-info-item {
    padding-bottom: 16upx;
}

.btn-group {
    border-top: 1upx solid #e2e2e2;
    padding: 24upx;
    justify-content: flex-end;
    background-color: #fff;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
}

.btn-group-item {
    font-size: 30upx;
    height: 60upx;
    width: 180upx;
    border-radius: 30upx;
    margin-left: 16upx;
    line-height: 60upx;
}

.btn-group-item.apply {
    border: 1upx solid #c9c9c9;
    color: #666666;
    background-color: #fff;
}

.btn-group-item.promptly {
    border: 1upx solid #ff4545;
    color: #ff4544;
    background-color: #fff5f5;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
</style>
